<!--
 * @Description:取非行间的样式
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-21 17:18:45
 -->
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>取非行间的样式兼容处理</title>
		<style>
			#div1 {
				border: 1px solid grey;
				line-height: 16px;
			}
			#div1::after{
				color:rgba(0, 256, 156, 0.5)
			}
		</style>
		<script>
			window.onload = function() {
				var odiv = document.getElementById("div1")
				function getStyle(ele, tum=null, attr) {
					if (window.getComputedStyle) {// 元素  伪类 css名字
						return window.getComputedStyle(ele, tum)[attr];
					}
					return ele.currentStyle[attr]; //ie
				}
				console.log(getStyle(odiv, "","line-height"));
				console.log(getStyle(odiv, "after","color"));
			}
		</script>
	</head>

	<body>
		<!-- https://www.cnblogs.com/cythia/p/6721145.html -->
		<div id="div1" style="width: 300px; height: 300px; background: #DEB887;">
			currentStyle属性和getComputedStyle属性不能设置属性,只能获取<br>
			currentStyle:该属性只兼容IE,不兼容火狐和谷歌<br>
			写法:ele.currentStyle["attr"]或者ele.currentStyle.attr;<br>
			getComputedStyle:该属性是兼容火狐谷歌,不兼容IE<br>
			写法:window.getComputedStyle(ele,null)[attr]<br>
			获取是window.getComputedStyle(ele,null).attr<br>
		</div>


	</body>

</html>
